<template>
    <div style="display: inline-block; height: 2.5rem; width: 25rem;">
        <span class="title">{{ title }}</span>
    <el-select
      :model-value="Tmodel"
      class="m-2"
      placeholder="Select"
      size="small"
    >
      <el-option
        v-for="item in Tgroup"
        :key="item.id"
        :label="item.name"
        :value="item.name"
        @click="sendName(item.name)"
      />
    </el-select>
    </div>
</template>
<style lang="less" scoped>
span.title{
    font-size: 1.2rem;
    margin: 0 0.5rem 0 2rem;
    font-weight: 500;
    position: relative;
    top: 0.4rem;
}
.el-select{
    width: 15rem;
    height: 2rem;
    :deep(.el-input__inner){
        font-size: 1rem;
        height: 1.6rem;
    }
    :deep(.el-input__wrapper){
        padding: 0 0.7rem 0 0.7rem;
        height: 2.5rem;
        border-radius: 0.5rem;
    }
    :deep(.el-input__suffix-inner svg){
        width: 1.4rem;
        height: 1.4rem;
    }
    :deep(.el-icon.el-select__caret.el-select__icon){
        margin: 0rem;
        width: 1.2rem;
    }

}
</style>

<script lang="ts" setup>
defineProps({
    Tmodel:{
        type:String || Number || Boolean,
        default:''
    },
    Tgroup:{
        type:Object,
        default: []
    },
    title:{
        type: String,
        default: ''
    }
})
let emit=defineEmits(["getName"])
let sendName=(name)=>{
    emit("getName",name)
}
</script>
